@import "utils.pcss";

.card{
	@mixin elev-1{};
	background: #fff;
	display: grid;
	grid-template-rows: auto 1fr auto;

	& > header{
		@mixin typo-h6{}; /* This is for inline header, when no h5/h6 */
		display: grid;
		grid-template-columns: 2rem 1fr 2rem;
		padding: 1rem;

		h5{
			@mixin typo-h6{};
			grid-column: 1 / 3;
		}

		h6{
			@mixin typo-sub1{};
			color: rgba(0, 0, 0, .54);
			grid-column: 1 / 3;
			grid-row: 2;
		}
		aside{
			cursor: pointer;
			grid-column: 3;
			float: right;
		}
	}

	& > section{
		@mixin typo-body1{};
		padding: 0 1rem 8px 1rem;
		color: rgba(0, 0, 0, .54);
	}

	& > footer{
		min-height:  3rem;
		display: flex;
		align-items: center;
		padding: 0 1rem;

		&.split-2{
			display: grid;
			grid-template-columns: 1fr 1fr;

			& > div:nth-child(2){
				display: flex;
				justify-content: flex-end;
				& > *{
					margin-left: 1rem;
				}				
			}

		}
	}

}


